<template>
  <div class="exam-manage-container">
    <!-- 查询表单 -->
    <el-card class="search-card">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="考试期次：">
          <el-input
            v-model="searchForm.examBatch"
            placeholder="请输入"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="考试名称：">
          <el-select
            v-model="searchForm.examName"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="item in examNameOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 操作栏 -->
    <div class="action-bar">
      <span class="selected-count">已选择 {{ selectedCount }} 项</span>
      <span class="query-time">本次查询耗时：{{ queryTime }}毫秒</span>
      <el-button type="text" @click="handleClear">清空</el-button>
    </div>

    <!-- 考试列表表格 -->
    <el-card>
      <el-table
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        border
        stripe
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="index" label="序号" width="60">
        </el-table-column>
        <el-table-column prop="examBatch" label="考试期次" width="180">
        </el-table-column>
        <el-table-column prop="examName" label="考试名称" width="180">
        </el-table-column>
        <el-table-column prop="examTime" label="考试时间" width="300">
        </el-table-column>
        <el-table-column prop="examPeople" label="考试人数" width="100">
        </el-table-column>
        <el-table-column prop="approvalStatus" label="审核状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusTagType(row.approvalStatus)">
              {{ row.approvalStatus }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template #default="{ row }">
            <el-button size="mini" type="primary" @click="handleApprove(row)"
              >审批</el-button
            >
            <el-button size="mini" @click="handleDetail(row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    const savedData = localStorage.getItem('examData');
    const originalData = savedData ? JSON.parse(savedData) : [
      {
        index: 1,
        examBatch: "2023年语文集中考试",
        examName: "语文集中考试",
        examTime: "2023-05-12 09:23:11 - 2023-05-12 09:23:11",
        examPeople: 100,
        approvalStatus: "待审批",
      },
      {
        index: 2,
        examBatch: "2023年语文第二次月考",
        examName: "语文第二次月考",
        examTime: "2023-05-12 09:23:11 - 2023-05-12 09:23:11",
        examPeople: 200,
        approvalStatus: "待审批",
      },
      {
        index: 3,
        examBatch: "2023年语文第二次月考",
        examName: "语文第二次月考",
        examTime: "2023-05-12 09:23:11 - 2023-05-12 09:23:11",
        examPeople: 300,
        approvalStatus: "待审批",
      },
    ];
    return {
      searchForm: {
        examBatch: "",
        examName: "",
      },
      examNameOptions: [
        { value: "1", label: "语文集中考试" },
        { value: "2", label: "语文第二次月考" },
      ],
      originalTableData: originalData,
      tableData: originalData.slice(),
      selectedCount: 0,
      queryTime: 345,
      multipleSelection: [],
    };
  },
  methods: {
    handleSearch() {
      const { examBatch, examName } = this.searchForm;
      this.tableData = this.originalTableData.filter((item) => {
        // 考试期次模糊匹配
        const batchMatch = examBatch
          ? item.examBatch.includes(examBatch)
          : true;
        // 考试名称精确匹配
        let nameMatch = true;
        if (examName) {
          const selected = this.examNameOptions.find(
            (opt) => opt.value === examName
          );
          nameMatch = selected ? item.examName === selected.label : false;
        }
        return batchMatch && nameMatch;
      });
      this.queryTime = Math.floor(Math.random() * 500) + 100;
      this.tableData = [...this.tableData];
    },
    handleReset() {
      this.searchForm = {
        examBatch: "",
        examName: "",
      };
      this.tableData = this.originalTableData.slice();
    },
    handleClear() {
      this.multipleSelection = [];
      this.selectedCount = 0;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.selectedCount = val.length;
    },
    handleApprove(row) {
      this.$confirm("确定要审批该考试吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const target = this.originalTableData.find(
            (item) => item.index === row.index
          );
          if (target) {
            target.approvalStatus = "已通过";
            localStorage.setItem('examData', JSON.stringify(this.originalTableData));
            this.tableData = this.tableData.map((item) => {
              return item.index === row.index
                ? { ...item, approvalStatus: "已通过" }
                : item;
            });
          }
          this.$message.success("审批成功");
          this.$router.push({
            name: "ApprovalPage",
            query: {
              examId: row.id, // 假设 row 有 id 字段
              examName: row.examName,
              examBatch: row.examBatch,
            },
          });
        })
        .catch(() => {
          this.$message.info("已取消审批");
        });
    },
    handleDetail(row) {
      this.$message.info(`查看详情: ${row.examName}`);
      this.$router.push({
        name: "ApprovalDetail",
      });
    },
    getStatusTagType(status) {
      const statusMap = {
        待审批: "warning",
        已通过: "success",
        已拒绝: "danger",
      };
      return statusMap[status] || "";
    },
  },
};
</script>

<style scoped>
.exam-manage-container {
  padding: 20px;
}

.search-card {
  margin-bottom: 20px;
}

.search-form {
  display: flex;
  align-items: center;
}

.action-bar {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #606266;
}

.selected-count {
  margin-right: 20px;
}

.query-time {
  margin-right: 20px;
}

.el-table {
  margin-top: 20px;
}
</style>
